<template>
	<view class="body">
		<view class="user-set-userinfo-list u-f-ac u-f-jsb">
			<view class="title">头像</view>
			<view class="u-f-ac" @tap="changeimg">
				<image class="img" :src="userpic" mode="aspectFill" lazy-load></image>
				<view class="icon iconfont icon-bianji1"></view>
			</view>
		</view>
		<view class="user-set-userinfo-list u-f-ac u-f-jsb">
			<view class="title">昵称</view>
			<view class="u-f-ac">
				<input class="input" type="text" v-model="username" />
				<view class="icon iconfont icon-bianji1"></view>
			</view>
		</view>
		<view class="user-set-userinfo-list u-f-ac u-f-jsb">
			<view class="title">性别</view>
			<view class="u-f-ac" @tap="changeOne('sex')">
				<view>{{sex}}</view>
				<view class="icon iconfont icon-bianji1"></view>
			</view>
		</view>
		<view class="user-set-userinfo-list u-f-ac u-f-jsb">
			<view class="title">生日</view>
			<picker mode="date" :value="birthday"  :start="startDate" :end="endDate" @change="bindDateChange">
				<view class="u-f-ac">
					<view>{{birthday}}</view>
					<view class="icon iconfont icon-bianji1"></view>
				</view>
			</picker>
		</view>
		<view class="user-set-userinfo-list u-f-ac u-f-jsb">
			<view class="title">情感</view>
			<view class="u-f-ac" @tap="changeOne('qg')">
				<view>{{qg}}</view>
				<view class="icon iconfont icon-bianji1"></view>
			</view>
		</view>
		<view class="user-set-userinfo-list u-f-ac u-f-jsb">
			<view class="title">职业</view>
			<view class="u-f-ac" @tap="changeOne('job')">
				<view>{{job}}</view>
				<view class="icon iconfont icon-bianji1"></view>
			</view>
		</view>
		<view class="user-set-userinfo-list u-f-ac u-f-jsb">
			<view class="title">家乡</view>
			<view class="u-f-ac" @tap="showMulLinkageThreePicker">
				<view>{{pickerText}}</view>
				<view class="icon iconfont icon-bianji1"></view>
			</view>
		</view>
		<button @tap="submit"  class="user-set-btn "  type="primary" >完成</button>
		<mpvue-city-picker
			themeColor="#007AFF"
			ref="mpvueCityPicker"
			:pickerValueDefault="cityPickerValueDefault"
			@onConfirm="onConfirm"
		></mpvue-city-picker>
	</view>
</template>

<script>
	let sex = ['不限', '男', '女'];
	let qg = ["秘密", '未婚','已婚','离异'];
	let job = ["秘密", "IT", "老师"]
	
	import mpvueCityPicker from '../../components/mpvue-citypicker/mpvueCityPicker.vue';
	
	export default {
		components:{
			mpvueCityPicker
		},
		data() {
			return {
				userpic: "../../static/demo/userpic/10.jpg",
				username: "昵称",
				sex:"不限",
				qg:"未婚",
				job:"IT",
				birthday: "1987-02-07",
				cityPickerValueDefault:[0,0,1],
				pickerText:"北京市-市辖区-西城区"
			}
		},
		computed:{
			startDate(){
				return this.getDate('start');
			},
			endDate(){
				return this.getDate('end');
			}
		},
		onBackPress(){
		    if(this.$refs.mpvueCityPicker.showPicker){
				this.$refs.mpvueCityPicker.pickerCancel();
				return true;
			}
		},
		onUnload(){
			if(this.$refs.mpvueCityPicker.showPicker){
				this.$refs.mpvueCityPicker.pickerCancel();
				return true;
			}
		},
		methods: {
			onConfirm(e){
				this.pickerText = e.label;
				this.cityPickerValueDefault = e.value;
			},
			//修改生日
			bindDateChange(e){
				this.birthday = e.target.value;
			},
			// 修改头像
			changeimg(){
				uni.chooseImage({
					count:1,
					sizeType: ["compressed"],
					success: (res) => {
						console.log(JSON.stringify(res.tempFilePaths));
						this.userpic = res.tempFilePaths;
					}
				})
			},
			changeOne(val){
				var arr ;
				switch (val) {
				case 'sex':
					arr = sex;
					break;
				case 'qg':
					arr = qg;
					break;
				case 'job':
					arr = job;
					break;
				default:
					return;
				}
				uni.showActionSheet({
					itemList:arr,
					success: (res) => {
						switch (val) {
						case 'sex':
							this.sex = arr[res.tapIndex];
							break;
						case 'qg':
							this.qg = arr[res.tapIndex];
							break;
						case 'job':
							this.job = arr[res.tapIndex];
							break;
						}
					}
				})
			},
			getDate(type){
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth()+1;
				let day = date.getDay();
				
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}+${month}-${day}`;
			},
			showMulLinkageThreePicker(){
				this.$refs.mpvueCityPicker.show();
			},
			//提交
			submit(){
				 
			}
		}
	}
</script>

<style>
@import "../../common/form.css";

.user-set-userinfo-list {
	padding: 20upx;
	border-bottom: 1upx solid #F4F4F4;
}

.user-set-userinfo-list .title {
	font-size: 30upx;
	font-weight: bold;
	color: #9B9B9B;
}
.user-set-userinfo-list .img {
	width: 80upx;
	height: 80upx;
	border-radius: 100%;
}

.user-set-userinfo-list .input {
	text-align: right;
}

.user-set-userinfo-list .icon {
	margin-left: 20upx;
}
</style>
